<template>
	<view class="" style="width: 100vw;height: 100vh;">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<view class="sticky">
			<!-- #ifdef APP-PLUS -->
			<view class="statusbox"></view>
			<!-- #endif -->
			<view class="tabWrap">
				<template v-for="(item, index) in typeList">
					<view class="item" :key="index" :style="typeIndex == index? [selStyle]:[tabNormaleStyle]" :class="{'typeAcitve':typeIndex == index}" @tap="typeChange(index)">
					{{item}}</view>
				</template>
			</view>
			<view class="menuWrap" v-if="typeIndex!=2" :style="backgroundColor">
				<!-- <view class="icon" >
					<image src="/static/notice/notice_icon.png" mode="scaleToFill"></image>
				</view> -->
				<!-- 筛选 -->
				<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation="true" v-if="!searchShow && tabList.length">
					<view class="list" >
						<template v-for="(item, index) in tabList">
							<view class="item" :class="{'selected':current == index}"
							  :style="current == index? [selStyle] :[tabNormaleStyle]" :key="index" @tap="tabChange(index)">
								{{item.name}}
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="container">
			<!-- 平台公告 -->
			<view class="notice-list" v-if="typeIndex == 0">
				<template v-for="(item, index) in list">
					<view class="item" :key="index" @tap="toDetail(item.id, 2)" :style="background">
						<view class="intro" :style="introStyle">
							<view class="title" :style="{color:knormalColor}">{{item.title}}</view>
							<view class="foot" :style="justify">
								<view class="time-column">
									<view class="time" :style="{color:knormalColor}">{{item.createTime | filterTime}}</view>
									<view class="time" :style="{color:knormalColor}">阅读量 {{item.viewcount | 0}}</view>
								</view>
								<view class="type" :style="typeStyle">{{item.category.name}}</view>
							</view>
						</view>
						<image class="cover" :src="item.category.image" mode="aspectFill"></image>
					</view>
				</template>
			</view>
			<!-- 新闻发声 -->
			<view class="news-list" v-if="typeIndex == 1">
				<template v-for="(item, index) in list">
					<view class="item" :style="background" :key="index" @tap="toDetail(item.id, 1)">
						<image class="cover" :src="item.image" mode="aspectFill"></image>
						<!-- <image class="cover" :src="item.category.image" mode="aspectFill"></image> -->
						<view class="intro">
							<view class="title" :style="{color:knormalColor}">{{item.title}}</view>
							<view class="foot" :style="justify">
								<view class="time-column">
									<view class="time" :style="{color:knormalColor}">{{item.createTime | filterTime}}</view>
									<view class="time" :style="{color:knormalColor}">阅读量 {{item.viewcount | 0}}</view>
								</view>
								<view class="type" :style="typeStyle">{{item.category.name}}</view>
							</view>
							
							<!-- <view class="foot">
								<view class="type" :style="typeStyle">{{item.category.name}}</view>
								<view class="time" :style="{color:knormalColor}">{{item.createTime | filterTime}}</view>
							</view> -->
						</view>
					</view>
				</template>
			</view>
			<!-- 辟谣墙 -->
			<view class="wall-list" v-if="typeIndex == 2">
				<template v-for="(item, index) in list">
					<view class="item" :key="index">
						<view class="author">
							<view class="user">
								<image :src="item.user_avatar || '/static/login/logo.png'" mode="aspectFill"></image>
								<text>{{item.user_nickname}}</text>
							</view>
							<view class="time">{{item.ctime}}</view>
						</view>
						<view class="desc">
							<view class="text">{{item.question}}</view>
							<view class="imgs">
								<template v-for="(src, key) in item.images">
									<view class="item" :key="key" @click.stop="lookImg(item.images, index)">
										<image class="img" :src="src" mode="aspectFill"></image>
										<image class="icon" src="/static/notice/notice_checked.png" mode="scaleToFill" v-if="item.reply"></image>
									</view>
								</template>
							</view>
						</view>
						<view class="server" v-if="item.reply">
							<view class="user">
								<image src="/static/notice/server_icon.png" mode="scaleToFill"></image>
								<text>官方回复:</text>
							</view>
							<view class="text">{{item.reply}}</view>
						</view>
					</view>
				</template>
			</view>
		<view style="text-align: center;" v-if="list.length===0">
			 <image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto " alt="" mode="widthFix"></image> 
			 </view>
		</view>
		<!-- 辟谣墙发布入口 -->
		<image class="wall-add" src="/static/notice/notice_wall.png" mode="scaleToFill"
			@tap="$common.navigateTo('/pages/notice/wall')" v-if="typeIndex == 2"></image>
		<!-- 底部导航 -->
		<tabbar></tabbar>
	</view>
</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
import timeFormat from '../../uni_modules/uview-ui/libs/function/timeFormat';
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				selStyle:{
					'--selectColorSize':this.$store.state.selectColorSize,//字体选中颜色
				   '--selBcakborder':this.$store.state.selBcakborder,//选中背景线颜色
				   QianmenonlyBackgournd:this.$store.state.QianmenonlyBackgournd,//浅色单个背景颜色

				},
				noticeId: '',
				// typeList: ['平台公告', '新闻发声', '辟谣墙'],
				typeList: ['平台公告', '新闻发声'],
				typeIndex: 0,
				tabList: [],
				current: 0,
				searchShow: false,
				keyword: '',
				list: [],
				page: 1,
				limit: 16,
				last: false,
				
				//主题设置
				background:'',
				justify:'',
				introStyle:'',
				typeStyle:'',
				backgroundColor:'',
			}
		},
		onShow() {
			uni.$once('notice', res => {
				// this.noticeId = res;
				this.typeIndex = 0;
				this.current = 0;
			});
			this.reload();
		},
		onLoad() {
			//根据主题设置样式
			if(this.ktheme != 'purple'){//黑色主题
				this.backgroundColor = {'background-color': 'rgba(255, 255, 255, 0.0)'}
				this.background = {'background-color': '#202020'}
				this.justify = {'flex-direction': 'column-reverse'}
				this.typeStyle = {'color': '#1CBC4D','background':'rgba(88, 204, 123, 0.20)','border':'2rpx #58CC7B solid'}
			}else{
				this.backgroundColor = {'background-color': 'rgba(255, 255, 255, .64)'}
				this.background = {'background':'#fff'}
				this.justify = {'justify-content': 'space-between'}
				this.typeStyle = {'color': '#BD89F7','background':'rgb(234,225,255,0.5)','border':'2rpx #BD89F7 solid'}
			}
		},
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM')
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			if (this.typeIndex == 0) {
				this.getNoticeList();
			}
			if (this.typeIndex == 1) {
				this.getNewsList();
			}
			if (this.typeIndex == 2) {
				this.getMessageList();
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 300);
		},
		onReachBottom() {
			if (!this.last) {
				this.page++;
				if (this.typeIndex == 0) {
					this.getNoticeList();
				}
				if (this.typeIndex == 1) {
					this.getNewsList();
				}
				if (this.typeIndex == 2) {
					this.getMessageList();
				}
			}
		},
		methods: {
			// 重置页面
			reload() {
				if (this.typeIndex == 0) {
					this.getNoticeType();
				}
				if (this.typeIndex == 1) {
					this.getNewsType();
				}
				if (this.typeIndex == 2) {
					this.init();
				}
			},
			search() {
				this.init();
			},
			// 一级菜单切换
			typeChange(index) {
				if (this.typeIndex == index) return;
				this.typeIndex = index;
				this.current = 0;
				this.searchShow = false;
				this.keyword = '';
				this.reload();
			},
			// 二级菜单切换
			tabChange(id) {
				this.current = id;
				this.init();
			},
			// 初始化分页
			init() {
				this.page = 1;
				this.list = [];
				if (this.typeIndex == 0) {
					this.getNoticeList();
				}
				if (this.typeIndex == 1) {
					this.getNewsList();
				}
				if (this.typeIndex == 2) {
					this.getMessageList();
				}
			},
			// 获取平台公告二级分类
			getNoticeType() {
				this.$api.getNoticeType({}, res => {
					if (res.status) {
						this.tabList = [{id: '', name: '全部'}, ...res.data];
						this.init();
					}
				},false);
			},
			// 获取平台公告列表
			getNoticeList() {
				let data = {
					pageNo: this.page,
					// limit: this.limit,
					categoryId: this.tabList[this.current].id,
					// keyname: this.keyword
				}
				this.$api.notice(data, res => {
					if (res.status) {
						if (res.data.length == 0) this.last = true;
						if (this.page == 1) {
							this.list = res.data;
						} else {
							this.list = [...this.list, ...res.data];
						}
					}
				});
			},
			// 获取新闻发声二级分类
			getNewsType() {
				this.$api.getNewsType({}, res => {
					if (res.status) {
						this.tabList = [{id: '', name: '全部'}, ...res.data];
						this.init();
					}
				},false);
			},
			// 获取新闻发声列表
			getNewsList() {
				let data = {
					pageNo: this.page,
					// limit: this.limit,
					categoryId: this.tabList[this.current].id,
					// title: this.keyword
				}
				this.$api.getNewsList(data, res => {
					if (res.status) {
						if (res.data.length == 0) this.last = true;
						if (this.page == 1) {
							this.list = res.data;
						} else {
							this.list = [...this.list, ...res.data];
						}
					}
				});
			},
			// 获取辟谣墙列表
			getMessageList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$api.getMessageList(data, res => {
					if (res.status) {
						if (res.data.length == 0) this.last = true;
						if (this.page == 1) {
							this.list = res.data;
						} else {
							this.list = [...this.list, ...res.data];
						}
					}
				});
			},
			// 查看详情
			toDetail(id, type) {
				this.$common.navigateTo('/pages/article/index?id=' + id + '&id_type='+type)
			},
			// 查看大图
			lookImg(urls, index) {
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
 
	.sticky {
		width: 100%;
		// height: calc(184rpx + var(--status-bar-height));
		position: relative;
		z-index: 2;
		.statusbox {
			height: var(--status-bar-height);
		}
		.tabWrap {
			width: 100%;
			height: 130rpx;
			padding: 30rpx 80rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item {
				font-size: 32rpx;
				// color: #333;
				color: var(--tabNormalColor);
				font-weight: 400;
				position: relative;
			}
			.typeAcitve {
				// color: #863A3A;
				color: var(--selectColorSize);
				font-weight: bold;
			}
			.typeAcitve::after {
				display: block;
				clear: both;
				content: '';
				width: 68%;
				height: 7rpx;
				// background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
				background:var(--selBcakborder);
				
				border-radius: 100rpx;
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				transform: translateX(-50%);
				z-index: 2;
			}
		}
		.menuWrap {
			width: 100%;
			height: 88rpx;
			// background-color: rgba(255, 255, 255, .64);
			display: flex;
			align-items: center;
			// margin-top: 10rpx;
			.icon {
				width: 106rpx;
				height: 100%;
				padding: 0 27rpx 0 48rpx;
				display: flex;
				align-items: center;
				position: relative;
				image {
					width: 31rpx;
					height: 32rpx;
					display: block;
				}
			}
			.icon::after {
				display: block;
				clear: both;
				content: '';
				width: 1rpx;
				height: 42rpx;
				background-color: #ABA9B4;
				position: absolute;
				top: 50%;
				right: 0;
				z-index: 2;
				transform: translateY(-50%);
			}
			.searchWrap {
				width: 644rpx;
				padding: 0 40rpx;
				.searchBox {
					width: 100%;
					height: 88rpx;
					border-radius: 50rpx;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.search_input {
						flex: 1;
						height: 88rpx;
						padding-left: 20rpx;
						font-size: 28rpx;
						color: #333;
					}
					.del {
						width: 30rpx;
						height: 30rpx;
						display: block;
					}
				}
			}
			.scrollWrap {
				width: 100%;
				height: 100%;
				padding: 0 48rpx 0 24rpx;
				box-sizing: border-box;
				white-space: nowrap;
				.list {
					height: 100%;
					display: flex;
					align-items: center;
					.item {
						font-size: 30rpx;
						color:var(--tabNormalColor);
						font-weight: 400;
						margin-right: 46rpx;
					}
					.selected {
						color:var(--selectColorSize);
						// color: #FE005A;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	//渐显
	@keyframes fold {
	  0% {
	    transform: rotateX(100deg);
	  }
	  50% {
	    transform: rotateX(10deg);
	  }
	  100% {
	    transform:rotateX(0deg);
	  }
	}
	
	.fold-element {
	  animation: fold 1s;
	}
	
	
	.container {
		width: 100%;
		padding: 0 40rpx 50rpx;
		margin-top: 30rpx;
		.notice-list {
			width: 100%;
			.item {
				width: 100%;
				// background-color: $bg-box;
				border-radius: 20rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.intro {
					width: 340rpx;
					// height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						width: 100%;
						padding: 4rpx 0;
						overflow: hidden;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
					}
					.foot {
						display: flex;
						flex-direction: row !important;
						align-items: center;
						.time-column{
							display: flex;
							flex-direction: column;
							 .time {
							 	font-size: 16rpx;
							 	color: #9E9E9E;
							 	margin-right: 9rpx;
							 }
						}
						.type {
							margin-left: auto;
							margin-right: 8rpx;
							display: inline-block;
							padding: 4rpx 10rpx;
							border-radius: 5rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
						}
					}
				}
				.cover {
					border-radius: 15rpx;
					width: 276rpx;
					height: 150rpx;
					display: block;
				}
			}
			& > view:first-child {
				margin-top: 0;
			}
		}
		.news-list {
			width: 100%;
			.item {
				width: 100%;
				border-radius: 20rpx;
				padding: 17rpx 25rpx 29rpx;
				margin-top: 20rpx;
				.cover {
					width: 100%;
					height: 240rpx;
					display: block;
					border-radius: 20rpx;
				}
				.intro {
					padding: 16rpx 9rpx 0 6rpx;
					.title {
						font-size: 28rpx;
						overflow: hidden;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						display: -webkit-box;
					}
					.foot {
						margin-top: 18rpx;
						display: flex;
						flex-direction: row !important;
						align-items: center;
						.time-column{
							display: flex;
							flex-direction: column;
							 .time {
							 	font-size: 16rpx;
							 	color: #9E9E9E;
							 	margin-right: 9rpx;
							 }
						}
						.type {
							margin-left: auto;
							margin-right: 8rpx;
							display: inline-block;
							padding: 4rpx 10rpx;
							border-radius: 5rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
						}
					}
					.foot1 {
						display: flex;
						align-items: center;
						// justify-content: space-between;
						margin-top: 18rpx;
						.type {
							display: inline-block;
							padding: 4rpx 10rpx;
							border-radius: 5rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
						}
						.time {
							margin-left: 10rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #9E9E9E;
						}
					}
				}
			}
			& > view:first-child {
				margin-top: 0;
			}
		}
		.wall-list {
			width: 100%;
			.item {
				width: 100%;
				background-color: $bg-box;
				border-radius: 20rpx;
				padding: 19rpx 28rpx 27rpx;
				margin-top: 30rpx;
				.author {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.user {
						display: flex;
						align-items: center;
						image {
							width: 58rpx;
							height: 58rpx;
							display: block;
							border-radius: 50%;
						}
						text {
							font-size: 28rpx;
							color: #666;
							font-weight: bold;
							margin-left: 13rpx;
						}
					}
					.time {
						font-size: 24rpx;
						color: #333;
						font-weight: 400;
					}
				}
				.desc {
					width: 100%;
					padding: 0 75rpx 30rpx;
					border-bottom: 1rpx solid #D9D9D9;
					margin: 26rpx 0 24rpx;
					.text {
						font-size: 28rpx;
						color: #000;
						font-weight: bold;
					}
					.imgs {
						width: 100%;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 24rpx;
						.item {
							width: 142rpx;
							height: 189rpx;
							position: relative;
							margin-right: 24rpx;
							margin-top: 20rpx;
							.img {
								width: 100%;
								height: 100%;
								display: block;
							}
							.icon {
								width: 183rpx;
								height: 183rpx;
								display: block;
								position: absolute;
								top: 50%;
								left: 50%;
								z-index: 1;
								transform: translate(-50%, -50%);
							}
						}
						& > view:nth-child(3n) {
							margin-right: 0;
						}
						& > view:nth-child(-n+3) {
							margin-top: 0;
						}
					}
				}
				.server {
					display: flex;
					align-items: center;
					.user {
						display: flex;
						align-items: center;
						margin-right: 5rpx;
						image {
							width: 49rpx;
							height: 49rpx;
							display: block;
							border-radius: 50%;
						}
						text {
							padding-bottom: 10rpx;
							font-size: 24rpx;
							color: #FE005A;
							font-weight: 400;
							margin-left: 16rpx;
						}
					}
					.text {
						width: 450rpx;
						padding-bottom: 10rpx;
						font-size: 24rpx;
						color: #141519;
						font-weight: 400;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			& > view:first-child {
				margin-top: 0;
			}
		}
	}
	.wall-add {
		width: 120rpx;
		height: 120rpx;
		display: block;
		position: fixed;
		right: 30rpx;
		bottom: 242rpx;
		z-index: 10;
	}
</style>